<template>
  <div class="dashboard-editor-container">
    <div class="body">
      <div class="leftBody">
        <div class="project">
          <div class="pojectTitle">
            <!-- <div class="lefticon" />
            <div class="boxicon" /> -->
            <div class="titleicon" style="margin: 0 12px;">我的项目</div>
            <!-- <div class="boxicon" />
            <div class="righticon" /> -->
          </div>
          <div style="display:flex">
            <div class="info">
              <el-row>
                <el-col :span="6">
                  <div class="number" @click="projectLink(undefined)">{{ myProject.totalNo }}</div>
                  <div class="name">总项目数</div>
                 
                </el-col>
                <el-col :span="6">
                  <div
                    class="number"
                    style="color: #2ECC89;"
                    @click="projectLink(1)"
                  >{{ myProject.processingNo }}</div>
                  <div class="name">进行中项目</div>
                </el-col>

                <el-col :span="6">
                  <div
                    class="number"
                    style="color: #FF9B44;"
                    @click="projectLink(0)"
                  >{{ myProject.preparationNo }}</div>
                  <div class="name">筹备期项目</div>
                </el-col>
                <el-col :span="6">
                  <div
                    class="number"
                     style="color: #E85258;"
                    @click="projectLink(2)"
                  >{{ myProject.deliveryNo }}</div>
                  <div class="name">成果交付项目</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="titleImg">
          <!-- <el-image :src="require('@/assets/image/index_project.png')" class="imgIcon" /> -->
          <div class="imgName">我关注的项目</div>
        </div>
        <div class="table_content">
          <div class="table_title">
            <div style="width:50px" />
            <div style="flex:auto">项目名称</div>
            <div style="width:120px;text-align:center">项目进展</div>
            <div style="width:140px;text-align:center">开始时间</div>
          </div>
          <div
            v-for="item in focusProject"
            :key="item.projectId"
            class="table_body"
            @click="focusProjectLink(item)"
          >
            <!-- <div style="width:50px;padding-left:20px">
              <div class="transicon" />
            </div> -->
            <div class="table_name">{{ item.projectName }}</div>
            <div class="table_status">
              <el-tag :type="item.statusType">{{ item.statusText }}</el-tag>
            </div>
            <div class="table_time">{{ parseTime(item.startDate,'{y}-{m}-{d}') }}</div>
          </div>
        </div>
      </div>
      <div class="rightBody">
        <div style="display:flex">
          <div class="new-message-box">
            <div class="message-content" @click="unfinshedWorkLink">
              <div class="img-box">
                <img :src="require('@/assets/image/unfinshedWork.png')" style="width:50%;margin-bottom: 10px;" />
                <span class="message-icon">{{unfinshedWorkNum}}</span>
              </div>
              我的待办
            </div>
            <div class="message-content" @click="unreadWorkLink">
              <div class="img-box">
                <img :src="require('@/assets/image/circulate.png')" style="width:50%;margin-bottom: 10px;" />
                <span class="message-icon">{{circulateNum}}</span>
              </div>
              我的待阅
            </div>
            <div class="message-content" @click="circulateLink">
              <div class="img-box">
                <img :src="require('@/assets/image/process.png')" style="width:50%;margin-bottom: 10px;" />
              </div>
              流程查询
            </div>
            <div class="message-content" @click="messageLink">
              <div class="img-box">
                <img :src="require('@/assets/image/message.png')" style="width:50%;margin-bottom: 10px;" />
                <span class="message-icon">{{messageNum}}</span>
              </div>
              未读消息
            </div>
          </div>
          <!-- <div class="unfinshedWork" @click="unfinshedWorkLink">
            <div class="img">
              <img :src="require('@/assets/image/unfinshedWork.png')" style="width:70%" />
            </div>
            <div class="info">
              <div class="title">
                <div class="lefticon" />
                <div class="boxicon" />
                <div class="titleicon">我的待办</div>
                <div class="boxicon" />
                <div class="righticon" />
              </div>
              <div class="number" style="color: #FF4D4F;">{{ unfinshedWorkNum }}</div>
            </div>
          </div> -->

          <!-- <div class="message" @click="messageLink">
            <div class="img">
              <img :src="require('@/assets/image/message.png')" style="width:70%" />
            </div>
            <div class="info">
              <div class="title">
                <div class="lefticon" />
                <div class="boxicon" />
                <div class="titleicon">我的消息</div>
                <div class="boxicon" />
                <div class="righticon" />
              </div>
              <div class="number" style="color: #FF4D4F;">{{ messageNum }}</div>
            </div>
          </div> -->


        </div>
        <div class="titleImg">
          <!-- <el-image :src="require('@/assets/image/index_book.png')" class="imgIcon" /> -->
          <div class="imgName">全过程工程咨询服务标准化手册</div>
        </div>
        <div class="book_content">
          <el-row :gutter="20">
            <el-col v-for="item in bookList" :key="item.img" :span="8" style="margin-bottom:10px">
              <!-- :style="{backgroundImage:'url(' + item.img +')'}" -->
              <div
                @click="openChangeView(item.name)"
                @mouseover="selectStyle(item.name)"
                @mouseout="outStyle()"
                class="book_img">
                <div>
                  <img v-bind:src="item.img" alt="">
                  <div>{{ item.name }}</div>
                  </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="title">
        <span>服务支持：总师室：孙慧洁/021-33627257/316办公室；信息部：黄伟之/021-33626713/330办公室</span>
        <span style="padding-left:20px;">全过程工程咨询服务云平台 | ©上海同济工程咨询有限公司 版权所有</span>
        </div>
    </div>

    <el-dialog :visible.sync="openIframe" width="1000px">
      <div class="">
        <div class='top-main'>
          <div class="title-box">
            <h1 style="padding-left:100px;">{{publicityData.title}}</h1>
            <img class='logo-min' src="../assets/image/tjlogo.png" alt="">
          </div>
          <p v-if="!this.isOrther">{{publicityData.introduction}}</p>
          <p v-else style="text-align:left;">{{publicityData.introduction}}</p>
        </div>
        <div class="dialog-content" v-if="!this.isOrther">
          <div class="main-left">
            <el-carousel indicator-position="outside" height="400px" @change="imgChange">
              <el-carousel-item v-for="(item,index) in publicityData.abc_img" :key="index">
                <img :src="item.url" class="image">
              </el-carousel-item>
            </el-carousel>
            <div>
              <div class="carousel-name">
                <img class='jiantou' src="../assets/image/jiantou.png" alt="">
                {{this.imgName}}
              </div>
            </div>
          </div>
         
          <div class="main-right">
            <div v-for="(item,index) in publicityData.preConsultText" :key="index">
              <div class="number-box">
                <span class="number">{{item.number}}</span>
                <span class="span">{{item.name}}</span>
              </div>
              <div class="list-box">
                <ul>
                  <li v-for="(list,index) in item.content" :key="index">{{list.text}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="orther-main">
          <div class="orther-main-left">
            <h3>设计咨询</h3>
            <p>采用平行的专业团队模式，坚持“设计创造价值、创意改变生活”的理念，本着博取众长、精心研究的工作态度，努力为客户提供高质量、全方位的设计咨询服务。</p>
            <div v-for="(item,index) in publicityData.preConsultText" :key="index">
              <div class="number-box">
                <span class="number">{{item.number}}</span>
                <span class="span">{{item.name}}</span>
              </div>
              <div class="list-box">
                <ul>
                  <li v-for="(list,index) in item.content" :key="index">{{list.text}}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="orther-main-right">
            <h3>政府、行业与企业咨询</h3>
            <p>受政府部门、行业协会及企事业单位的委托，依靠产学研合作平台，以专业、前沿、全面的分析研究，为业主提供行业发展规划、政策咨询、企业培训等服务。</p>
            <div v-for="(item,index) in publicityData.preConsultTextOrther" :key="index">
              <div class="number-box">
                <span class="number">{{item.number}}</span>
                <span class="span">{{item.name}}</span>
              </div>
              <div class="list-box">
                <ul>
                  <li v-for="(list,index) in item.content" :key="index">{{list.text}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div style="text-align:right;padding-right:20px;display:none;" @click="divChange()"><el-link style="color:#4578db;" type="primary">跳转至业务标准库>></el-link></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { focusProject, myProject } from "@/api/index";
import { messageNum } from "@/api/messageList";
import { mapGetters } from "vuex";
import axios from "axios";
import { Encrypt } from "@/utils/crypto";
export default {
  name: "Index",
  data () {
    return {
      openIframe: false,
      focusProject: [],
      bookList: [
        {
          name: "前期咨询",
          img: require("../assets/image/index_one.png")
        },
        {
          name: "招标代理",
          img: require("../assets/image/index_two.png")
        },
        {
          name: "造价咨询",
          img: require("../assets/image/index_three.png")
        },
        {
          name: "工程监理",
          img: require("../assets/image/index_four.png")
        },
        {
          name: "项目管理",
          img: require("../assets/image/index_five.png")
        },
        {
          name: "环境咨询",
          img: require("../assets/image/index_six.png")
        },
        {
          name: "信息咨询",
          img: require("../assets/image/index_seven.png")
        },
        {
          name: "专项咨询",
          img: require("../assets/image/index_eight.png")
        },
        {
          name: "其他咨询",
          img: require("../assets/image/index_nine.png")
        }
      ],
      imgName: '普湾新区松木岛项目',
      messageNum: 0,
      unfinshedWorkNum: 0,
      circulateNum: 0,
      myProject: {},
      bpmcode: null,
      publicityData: {},
      isOrther: false
    };
  },
  computed: {
    ...mapGetters(["permission_routes"]),
  },
  async created () {
    const loading = this.$loading({
      lock: true,
      text: "Loading"
    });
    await this.getfocusProject();
    await this.getmyProject();
    await this.getunfinshedWork();
    await messageNum().then(res => {
      if (res.code === 200) {
        this.messageNum = res.data.count;
        loading.close();
      }
    });
  },
  methods: {
    getfocusProject () {
      focusProject().then(res => {
        this.focusProject = res.data.map(item => {
          switch (item.projectStatus) {
            case "0":
              item.statusText = "筹备";
              item.statusType = "";
              break;
            case "1":
              item.statusText = "进行中";
              item.statusType = "info";
              break;
            case "2":
              item.statusText = "成果交付";
              item.statusType = "success";
              break;
            case "3":
              item.statusText = "项目完成";
              item.statusType = "success";
              break;
            case "4":
              item.statusText = "项目暂停";
              item.statusType = "danger";
              break;
            case "5":
              item.statusText = "项目终止";
              item.statusType = "warning";
              break;
            case "6":
              item.statusText = "项目作废";
              item.statusType = "danger";
              break;
          }
          return item;
        });
      });
    },
    getmyProject () {
      myProject().then(res => {
        this.myProject = res.data;
      });
    },
    selectStyle(name){
      if(name == '前期咨询'){
        this.bookList[0].img = require("../assets/image/index_one1.png")
      }else if(name == '招标代理'){
        this.bookList[1].img = require("../assets/image/index_two1.png")
      }else if(name == '造价咨询'){
        this.bookList[2].img = require("../assets/image/index_three1.png")
      }else if(name == '工程监理'){
        this.bookList[3].img = require("../assets/image/index_four1.png")
      }else if(name == '项目管理'){
        this.bookList[4].img = require("../assets/image/index_five1.png")
      }else if(name == '环境咨询'){
        this.bookList[5].img = require("../assets/image/index_six1.png")
      }else if(name == '信息咨询'){
        this.bookList[6].img = require("../assets/image/index_seven1.png")
      }else if(name == '专项咨询'){
        this.bookList[7].img = require("../assets/image/index_eight1.png")
      }else if(name == '其他咨询'){
        this.bookList[8].img = require("../assets/image/index_nine1.png")
      }
    },
    outStyle(){
      this.bookList = [
        {
          name: "前期咨询",
          img: require("../assets/image/index_one.png")
        },
        {
          name: "招标代理",
          img: require("../assets/image/index_two.png")
        },
        {
          name: "造价咨询",
          img: require("../assets/image/index_three.png")
        },
        {
          name: "工程监理",
          img: require("../assets/image/index_four.png")
        },
        {
          name: "项目管理",
          img: require("../assets/image/index_five.png")
        },
        {
          name: "环境咨询",
          img: require("../assets/image/index_six.png")
        },
        {
          name: "信息咨询",
          img: require("../assets/image/index_seven.png")
        },
        {
          name: "专项咨询",
          img: require("../assets/image/index_eight.png")
        },
        {
          name: "其他咨询",
          img: require("../assets/image/index_nine.png")
        }
      ]
    },
    getunfinshedWork () {
      axios
        .get(`${this.bpmUrl}/Portal/InstanceController/validityTime`)
        .then(res => {
          this.bpmcode = res.data.data;
        });

      axios.get(
          `${this.bpmUrl}/Portal/InstanceController/unfinish?code=${
          JSON.parse(sessionStorage.getItem("userinfo") || {}).jobNo
          }`
        )
        .then(res => {
          this.unfinshedWorkNum = res.data.data;
        });
      axios.get(
          `${this.bpmUrl}/Portal/InstanceController/circulate?code=${
          JSON.parse(sessionStorage.getItem("userinfo") || {}).jobNo
          }`
        ).then(res => {
          this.circulateNum = res.data.data;
      });  
    },
    projectLink (num) {
      this.getLeftMenu();
      sessionStorage.setItem("projectStatus", num);
      this.$router.push("/projectWorkbench/projectWorkbench/projectGlance");
    },
    unfinshedWorkLink () {
      const code = JSON.parse(sessionStorage.getItem("userinfo") || {}).jobNo;
      window.open(`${this.bpmUrl}/Portal/run.html?date=${
        this.bpmcode
        }&code=${code}&flag=1`, '_blank')
    },
    unreadWorkLink () {
      const code = JSON.parse(sessionStorage.getItem("userinfo") || {}).jobNo;
      window.open(`${this.bpmUrl}/Portal/run.html?date=${
        this.bpmcode
        }&code=${code}&flag=4`, '_blank')
    },
    messageLink () {
      this.$router.push("/messageList/messageList");
    },
    circulateLink(){
      this.$router.push("/searchWorkflow/searchWorkflow");
    },
    focusProjectLink (row) {
      this.permission_routes.forEach(item => {
        if (item.name === 'ProjectList') {
          this.projectRoutes = item.children
        }
      })
      this.projectRoutes.map(item => {
        if (item.children) {
          item.children.map(obj => {
            obj.name = obj.name.replace('/:id', '')
            obj.path =
              obj.name.replace(item.name[0], item.name[0].toLowerCase()) +
              '/' +
              row.projectId
          })
        } else {
          item.name = item.name.replace('/:id', '')
          item.path =
            item.name.replace(item.name[0], item.name[0].toLowerCase()) +
            '/' +
            row.projectId
        }
      })
      // this.permission_routes.forEach(item => {
      //   if (item.name === "ProjectList") {
      //     this.projectRoutes = item.children;
      //     console.log(this.projectRoutes)
      //   }
      // });
      // this.projectRoutes.map(item => {
      //   item.name = item.name.replace("/:id", "");
      //   if(item.name === 'BusinessManageList'){
      //     item.path = item.name.replace(item.name[0], item.name[0].toLowerCase())
      //   }else{
      //     item.path =
      //     item.name.replace(item.name[0], item.name[0].toLowerCase()) +
      //     "/" +
      //     row.projectId;
      //   }
      // });

      console.log(this.projectRoutes, 'projectRoutes')
      sessionStorage.setItem("menuTitle", row.projectName);
      sessionStorage.setItem('isvalid', row.isvalid)
      sessionStorage.setItem(
        "projectRoutes",
        JSON.stringify(this.projectRoutes)
      );
      let routeData = this.$router.resolve({
        path: `/projectList/projectGeneral/${row.projectId}`
      });

      window.open(routeData.href, "_blank");
    },
    getLeftMenu () {
      this.leftRoutes = [];
      let name = "ProjectWorkbench";
      this.permission_routes.map(item => {
        if (item.name === name) {
          this.leftRoutes = JSON.parse(JSON.stringify(item.children) || {});
        }
      });

      this.leftRoutes.map(item => {
        item.path =
          name.replace(name[0], name[0].toLowerCase()) + "/" + item.path;
      });

      this.$store.commit("LEFT_ROUTES", this.leftRoutes);
    },
    openChangeView(name){
      if(name == '其他咨询'){
        this.isOrther = true
      }else{
        this.isOrther = false
      }
      if(name == '前期咨询'){
        this.publicityData = {
          title:'前期咨询',
          introduction:'遵循“客观性、针对性、合规性”的原则，根据客户的需求，通过全方位地调查、分析和论证，编制高质量的研究、策划和评估报告。',
          abc_img: [
            { url: require("../assets/image/bgImg/1.jpg") },
            { url: require("../assets/image/bgImg/2.jpg") },
            { url: require("../assets/image/bgImg/3.jpg") },
            { url: require("../assets/image/bgImg/4.jpg") },
          ],
          iconText:[
            '普湾新区松木岛项目','上海月星环球商业中心','武夷山下梅村文化旅游综合体项目','开远市七星湖片区产业策划项目'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'编制类',
              content:[
                {text:'项目建议书编制'},
                {text:'可行性研究编制'},
                {text:'项目申请报告编制'},
                 {text:'节能报告编制'},
                {text:'社会稳定性风险评估'},
                {text:'项目资金申请报告'},
                {text:'项目规划咨询'},
                {text:'项目策划咨询'},
              ]
            },
            {
              number:'02.',
              name:'评估类',
              content:[
                {text:'项目建议书评估'},
                {text:'可行性研究评估'},
                {text:'项目申请报告评估'},
                {text:'节能评审'},
                {text:'社会稳定风险评价'},
                {text:'初步设计评审'},
              ]
            },
            {
              number:'03.',
              name:'PPP咨询',
              content:[
                {text:'PPP咨询'},
              ]
            },
            {
              number:'04.',
              name:'其他前期咨询',
              content:[
                {text:'其他前期咨询服务'},
              ]
            }
          ]
        }
      }else if(name == '招标代理'){
        this.publicityData = {
          title:'招标代理',
          introduction:'恪守“公开、公平、公正、诚实信用”原则，坚持从客户需求出发，针对不同的建设项目特点，策划制定采购与招投标的实施方案，凭借严格的招标与采购程序，选择出在资格、能力、资信、价格等方面都能最大限度满足客户和项目建设实际需要的承包商和供应商。同济咨询不仅重视招标及采购策划与具体实施，还特别关注中标单位合同履行中的实际表现，以此快速更新服务，提高服务水平。',
          abc_img: [
            { url: require("../assets/image/bgImg/tender1.jpg") },
            { url: require("../assets/image/bgImg/tender2.png") },
            { url: require("../assets/image/bgImg/tender3.jpg") },
          ],
          iconText:[
            '上海交通大学医学院附属仁济医院','上海隆视投资有限公司建设项目','虹漕路41号工业研发楼建设项目'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'工程类招标代理',
              content:[
                {text:'设计招标代理'},
                {text:'勘察招标代理'},
                {text:'施工招标代理'},
                {text:'监理招标代理'},
                {text:'一体化招标代理'},
                {text:'材料设备招标代理'},
                {text:'其他服务招标代理'},
              ]
            },
            {
              number:'02.',
              name:'其它招采服务',
              content:[
                {text:'服务类招标代理'},
                {text:'货物类招标代理'},
              ]
            },
          ]
        }
      }else if(name == '造价咨询'){
        this.publicityData = {
          title:'造价咨询',
          introduction:'以增值理念为核心，通过深入广泛的调查、分析同类项目、市场的信息，结合我们二十多年积累的工程数据，充分运用价值工程、挣值法等科学手段，力求项目每分投入都能获得更高的价值。',
          abc_img: [
            { url: require("../assets/image/bgImg/cost1.jpg") },
            { url: require("../assets/image/bgImg/cost2.jpg") },
            { url: require("../assets/image/bgImg/cost3.jpg") },
          ],
          iconText:[
            '万科虹桥商务区核心区北片区11号地块项目','徐汇滨江湘芒果项目','首创杨浦平凉路项目'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'决策阶段',
              content:[
                {text:'投资估算编制'},
                {text:'投资估算审核'},
                {text:'决策阶段方案经济比选'},
                {text:'建设项目经济评价'},
              ]
            },
            {
              number:'02.',
              name:'设计阶段',
              content:[
                {text:'设计概算编制'},
                {text:'设计概算审核'},
                {text:'优化设计造价咨询报告'},
                {text:'施工图预算编制'},
                {text:'施工图预算审核'},
              ]
            },
            {
              number:'03.',
              name:'发承包阶段',
              content:[
                {text:'工程量清单编制'},
                {text:'工程量清单审核'},
                {text:'最高投标限价编制'},
                {text:'最高投标限价审核'},
                {text:'清标报告'},
              ]
            },
            {
              number:'04.',
              name:'实施阶段',
              content:[
                {text:'实施阶段造价控制'},
              ]
            },
            {
              number:'05.',
              name:'竣工阶段',
              content:[
                {text:'竣工结算编制'},
                {text:'竣工结算审核'},
                {text:'竣工决算编制'},
              ]
            },
            {
              number:'06.',
              name:'其它造价咨询',
              content:[
                {text:'其它造价咨询服务'},
              ]
            },
          ]
        }
      }else if(name == '工程监理'){
        this.publicityData = {
          title:'工程监理',
          introduction:'坚持“守法、诚信、公正、科学”的宗旨，贯彻优质服务理念，为业主提供规范化的监理服务。服务期从施工准备期开始，经施工、安装调试、竣工验收等阶段，直至项目保修期结束为止，通过“三控、两管、一协调”，确保高质量实现项目目标。',
          abc_img: [
            { url: require("../assets/image/bgImg/engineer1.jpg") },
            { url: require("../assets/image/bgImg/engineer2.jpg") },
            { url: require("../assets/image/bgImg/engineer3.jpg") },
            { url: require("../assets/image/bgImg/engineer4.jpg") },
          ],
          iconText:[
            '外滩SOHO项目','外滩SOHO项目','上海迪士尼度假区-梦幻世界','兖州市人民医院新院工程'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'建设监理',
              content:[
                {text:'房屋建筑工程'},
                {text:'市政公用工程'},
                {text:'轨道交通与铁路工程'},
                {text:'公路工程'},
                {text:'水利水电工程'},
                {text:'港口与航道工程'},
                {text:'航空航天工程'},
              ]
            },
          ]
        }

      }else if(name == '项目管理'){
        this.publicityData = {
          title:'项目管理',
          introduction:'关注客户需求，以项目利益为中心，运用科学的理念、程序和方法，采用先进的管理技术和现代化管理手段，使工程建设项目的管理科学化、规范化、专业化和效能化，为客户带来最大的增值效益。根据工程项目建设的需要和特点，可为客户量身打造覆盖前期策划决策阶段、建设准备阶段、建设实施阶段和运营评价阶段的全过程或阶段性项目管理服务。',
          abc_img: [
            { url: require("../assets/image/bgImg/project-manage1.jpg") },
            { url: require("../assets/image/bgImg/project-manage2.jpg") },
            { url: require("../assets/image/bgImg/project-manage3.jpg") },
            { url: require("../assets/image/bgImg/project-manage4.jpg") },
          ],
          iconText:[
            '上海烟草集团有限责任公司营销中心改造工程','中国移动上海公司临港IDC数据中心','邹城市人民医院新城医院','南京河西新城区项目群'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'全过程服务',
              content:[
                {text:'区域开发总体管理'},
                {text:'项目群建设总控管理'},
                {text:'全过程项目管理'},
                {text:'项目代建'},
              ]
            },
            {
              number:'02.',
              name:'阶段服务',
              content:[
                {text:'项目（群）建设实施策划'},
                {text:'项目（群）管理组织策划'},
                {text:'报批报建管理'},
                {text:'设计阶段项目管理'},
                {text:'施工阶段项目管理'},
              ]
            },
          ]
        }
      }else if(name == '环境咨询'){
        this.publicityData = {
          title:'环境咨询',
          introduction:'同济咨询积极探索创新环境领域咨询服务模式，秉承同济大学“严谨，求实，团结，创新”的精神服务社会，坚持“绿水青山就是金山银山”的生态理念，依托同济大学丰富的专家、技术和人才资源，为客户提供“一站式”、“全方位”、“全过程”的环保咨询服务。',
          abc_img: [
            { url: require("../assets/image/bgImg/environment1.jpg") },
            { url: require("../assets/image/bgImg/environment2.jpg") },
            { url: require("../assets/image/bgImg/environment3.jpg") },
          ],
          iconText:[
            '南京德基广场','提篮桥街道HK324-01地块综合开发项目','苏州河深层管道调蓄系统工程'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'规划与环评',
              content:[
                {text:'环境影响评价'},
                {text:'玻璃幕墙光反射影响分析'},
                {text:'应急预案'},
                {text:'竣工环保验收'},
                {text:'排污许可'},
                {text:'环保管家咨询'},
              ]
            },
            {
              number:'02.',
              name:'土壤修复',
              content:[
                {text:'土壤污染状况调查'},
                {text:'土壤污染风险评估'},
                {text:'土壤污染修复技术方案'},
                {text:'土壤污染修复工程'},
                {text:'土壤污染修复效果评估'},
                {text:'土壤污染修复工程环境监理'},
              ]
            },
            {
              number:'03.',
              name:'水环境治理',
              content:[
                {text:'水环境综合治理咨询'},
              ]
            },
            {
              number:'04.',
              name:'其它环境咨询',
              content:[
                {text:'环境规划'},
                {text:'环境监理'},
                {text:'污染场地评估与修复'},
                {text:'VOCs减排'},
                {text:'技术尽职调查'},
                {text:'其它环境咨询服务'},
              ]
            },
          ]
        }
      }else if(name == '信息咨询'){
        this.publicityData = {
          title:'信息咨询',
          introduction:'同济咨询信息化技术应用与咨询部致力于为企业及政府提供信息化技术咨询和系统研发服务。基于建筑信息模型（BIM）、无人机（UAV）、物联网（IoT）、大数据、云计算等技术，借助地理信息系统（GIS）、全过程工程咨询信息化平台等工具，围绕建设工程项目全生命周期，为客户提供BIM技术咨询、无人机专项服务、全过程工程咨询信息化平台研发、智慧城市建设及其他信息化技术咨询服务解决方案。',
          abc_img: [
            { url: require("../assets/image/bgImg/infor-con1.png") },
            { url: require("../assets/image/bgImg/infor-con2.jpg") },
            { url: require("../assets/image/bgImg/infor-con3.png") },
          ],
          iconText:[
            '乌梁素海流域山水林田湖草生态保护修复试点工程协同管理平台','大数据应用咨询','乌梁素海流域山水林田湖草生态保护修复试点工程项目'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'BIM咨询',
            },
            {
              number:'02.',
              name:'无人机咨询',
            },
            {
              number:'03.',
              name:'技术开发咨询',
            },
            {
              number:'04.',
              name:'全过程工程咨询信息化平台',
            },
            {
              number:'05.',
              name:'智慧城市建设',
            },
            {
              number:'06.',
              name:'其他信息咨询',
            },
          ]
        }
      }else if(name == '专项咨询'){
        this.publicityData = {
          title:'专项咨询',
          introduction:'基于同济咨询自身的专家委员会，同时依托同济大学及同济产业各兄弟公司强大的技术、人才、专业支撑，以“满足客户利益与项目功能合理需求”为宗旨，着力开发新技术、新方法，充分发挥先进的技术优势，提供专业的技术咨询与管理服务。',
          abc_img: [
            { url: require("../assets/image/bgImg/special1.jpg") },
            { url: require("../assets/image/bgImg/special2.jpg") },
            { url: require("../assets/image/bgImg/special3.jpg") },
          ],
          iconText:[
            '宁波市轨道交通技术方案比选与认证','中国工商银行苏州分行大厦','大型低速风洞项目-梦幻世界'
          ],
          preConsultText:[
            {
              number:'01.',
              name:'TIS咨询',
            },
            {
              number:'02.',
              name:'项目后评估',
            },
            {
              number:'03.',
              name:'节能量审核',
            },
            {
              number:'04.',
              name:'司法鉴定',
            },
            {
              number:'05.',
              name:'下穿铁路专项咨询',
            },
            {
              number:'06.',
              name:'水土保持专项咨询',
            },
            {
              number:'07.',
              name:'培训服务',
            },
          ]
        }
      } else if(name == '其他咨询'){
        this.publicityData = {
          title:'专项咨询',
          introduction: '1.尽职调查   '+ '   2.其他专项咨询',
          preConsultText:[
            {
              number:'01.',
              name:'设计+策划',
              content:[
                {text:'建筑策划与设计'},
                {text:'项目建议书'},
                {text:'可行性研究报告'},
                {text:'概念设计方案'},
              ]
            },
            {
              number:'02.',
              name:'设计+管理',
              content:[
                {text:'设计管理'},
                {text:'设计进度管理'},
                {text:'设计质量管理'},
                {text:'建筑信息模型(BIM)管理'},
              ]
            },
            {
              number:'03.',
              name:'设计+咨询',
              content:[
                {text:'概念规划设计咨询'},
                {text:'教育建筑设计咨询'},
                {text:'医疗建筑设计咨询'},
                {text:'酒店建筑设计咨询'},
                {text:'商业建筑设计咨询'},
                {text:'办公建筑设计咨询'},
                {text:'文化建筑设计咨询'},
                {text:'居住建筑设计咨询'},
                {text:'园林景观设计咨询'},
                {text:'综合设计优化咨询'},
                {text:'绿色建筑设计咨询'},
                {text:'智慧城市设计咨询'},
              ]
            },
          ],
          preConsultTextOrther:[
            {
              number:'01.',
              name:'政府咨询',
              content:[
                {text:'政府咨询'},
              ]
            },
            {
              number:'02.',
              name:'行业咨询',
              content:[
                {text:'行业发展规划研究'},
                {text:'行业及企业战略及政策研究'},
                {text:'行业及企业培训'},
              ]
            },
            {
              number:'03.',
              name:'企业咨询',
              content:[
                {text:'企业横向合作研究'},
              ]
            },
          ]
        }
      }
      this.openIframe = true;
    },
    imgChange(index){
      if(index == 0){
        this.imgName = this.publicityData.iconText[index]
      }else if(index == 1){
        this.imgName = this.publicityData.iconText[index]
      }else if(index == 2){
        this.imgName = this.publicityData.iconText[index]
      }else if(index == 3){
        this.imgName = this.publicityData.iconText[index]
      }
    },
    divChange(){
      this.$router.push("/library/businessLibaray/manual");
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #f3f6fa;
  flex: 1;
  .body {
    display: flex;
    padding: 25px 40px 15px 40px;
    margin-bottom: 35px;
    .leftBody {
      min-width: 670px;
      max-width: 1170px;
      flex: auto;
      .project {
        width: 100%;
        height: 200px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        .pojectTitle {
          padding-top: 25px;
          margin-bottom: 15px;
          line-height: 33px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .info {
          text-align: center;
          align-items: center;
          height: 98px;
          .name {
            font-family: Microsoft YaHei;
            font-size: 20px;
            line-height: 28px;
            color: #1D145A;
            // color: rgba(0, 0, 0, 0.85);
          }
          .number {
            margin: 9px 0 16px 0;
            font-family: Microsoft YaHei,DINAlternate-Bold;
            // font-family: SimSun;
            font-size: 36px;
            line-height: 45px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
      .table_content {
        margin-top: 8px;
        width: 100%;
        background: #ffffff;
        border: 1px solid #e1e3ec;
        border-radius: 2px;
        height: 460px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .table_title {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          background: #dbe4fd;
          // background: rgba(97, 154, 197, 0.06);
          border-bottom: 1px solid #e1e3ec;
          border-radius: 2px 2px 0 0;
          height: 40px;
          font-weight: 600;
          font-size: 14px;
        }
        .table_body {
          font-size: 14px;
          display: flex;
          margin-top: 20px;
          align-items: center;
          cursor: pointer;
          .transicon {
            width: 8px;
            height: 8px;
            transform: rotate(45deg);
            background-image: linear-gradient(180deg, #41afec 0%, #0a406e 100%);
          }
          .table_name {
            flex: auto;
            margin-left: 20px;
          }
          .table_status {
            text-align: center;
            width: 120px;
          }
          .table_time {
            text-align: center;
            width: 140px;
          }
        }
      }
      .titleImg {
        margin-top: 30px;
        width: 100%;
        height: 40px;
        // border-bottom: 1px solid rgba(0, 103, 189, 0.65);
        background-image: url('../assets/image/porjectTitleImg.png');
        background-repeat: no-repeat;
        background-size: 184px 100%;
        display: flex;
        align-items: center;
      }
    }
    .rightBody {
      min-width: 390px;
      max-width: 640px;
      margin-left: 30px;
      flex: auto;
      .new-message-box{
        height: 200px;
        width: 100%;
        background-color: #fff;
        display: flex;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .message-content{
          font-size: 20px;
          font-weight: 400;
          color: #1D145A;
          width: 25%;
          text-align: center;
          cursor: pointer;
          .img-box{
            display: flex;
            justify-content: center;
            align-items: center;  
            position: relative;
            margin-top: 25%;
          }
        }
        .message-icon{
          display: inline-block;
          width: 28px;
          height: 20px;
          line-height: 20px;
          position: absolute;
          background: red;
          border-radius: 9px;
          color: #fff;
          font-size: 12px;
          right: 25px;
          top: -3px;
        }
      }
      .unfinshedWork {
        height: 200px;
        width: 100%;
        margin-right: 30px;
        background-color: #fff;
        display: flex;
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .message {
        height: 200px;
        width: 100%;
        background-color: #fff;
        display: flex;
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .titleImg {
        margin-top: 30px;
        width: 100%;
        height: 40px;
        // border-bottom: 1px solid rgba(0, 103, 189, 0.65);
        background-image: url('../assets/image/bookTitleImg.png');
        background-repeat: no-repeat;
        background-size: 370px 100%;
        display: flex;
        align-items: center;
      }
      .book_content {
        margin-top: 8px;
        width: 100%;
        background: #ffffff;
        border: 1px solid #e1e3ec;
        border-radius: 2px;
        height: 460px;
        padding: 12px 28px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .book_img {
          // font-weight: 600;
          width: 100%;
          height: 135px;
          background-repeat: no-repeat;
          background-size: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          font-family: Microsoft YaHei;
          font-size: 16px;
          color: rgba(36, 36, 36, 0.85);
          cursor: pointer;
          background: linear-gradient(180deg,#ffffff 7%, #ecf0f6);
          border: 1px solid #dae6fa;
          border-radius: 8px;
          &:hover{
            background: linear-gradient(323deg,#5a96fa 8%, #6dc1fd 94%);
            color: #fff;
          }
          img{
            width: 75px;
          }
        }
      }
    }
    .img {
      max-width: 100px;
      justify-content: flex-end;
      align-items: center;
      display: flex;
      flex: auto;
    }
    .info {
      flex: auto;
      .title {
        line-height: 33px;
        margin-top: 25px;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .number {
        font-family: DINAlternate-Bold;
        // font-family: SimSun;
        font-size: 38px;
        line-height: 45px;
        color: #262626;
        margin-top: 62px;
        text-align: center;
      }
    }
  }
  .footer {
    height: 50px;
    background: #e5ebf1;
    // background-color: rgba(213, 230, 250, 0.3);
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 50px;
    .title {
      font-family: Microsoft YaHei;
      font-size: 13px;
      color: #0a406e;
      letter-spacing: -0.13px;
      text-align: center;
    }
  }
}
.top-main{
  background-image: url('../assets/image/bgtop.png');
  height: 160px;
  padding-top: 15px;
  text-align: center;
  background-size:cover;
  position: relative;
  .title-box{
    display: flex;
    .logo-min{
      width: 100px;
      height: 36px;
    }
    h1{
      color: #fff;
      font-size: 24px;
      margin-top: 0px;
      width: 88%;
    }
  }
  p{
    font-size: 16px;
    color: #fff;
    text-align: left;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 0px;
    text-indent: 2em;
    margin-top:10px;
  }
}
.dialog-content{
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  .main-left{
    width:60%;
    .image{
      width: 805px;
      height: 604px;
    }
    .carousel-name{
      text-align: center;
      margin: 0 auto;
      width: 440px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #666666;
      font-size: 14px;
      font-weight: 500;
      // font-family: PingFangSC, PingFangSC-Medium;
      font-family: Microsoft YaHei;
      .jiantou{
        width:16px;
        height:16px;
        margin-right: 6px;
        vertical-align: middle;
      }
    }
  }
  .main-right{
    margin-left: 20px;
    width: 40%;
  }
}
/deep/ .el-dialog{
  margin-bottom: 50px;
}
/deep/.el-dialog__body{
  padding-top: 10px;
}
/deep/.el-dialog__headerbtn{
  top:12px;
}
.number-box{
  margin-bottom: 8px;
  .number{
    display: inline-block;
    font-size: 24px;
    font-family: Microsoft YaHei,DINCondensed, DINCondensed-Bold;
    font-weight: 600;
    background-image: -webkit-linear-gradient(bottom,#ffffff,#11017d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    // background: linear-gradient(180deg,#11017d, #ffffff 78%);
  }
  .span{
    font-size: 16px;
    color: #11017D;
    font-weight: 600;
    font-family: Microsoft YaHei,PingFangSC, PingFangSC-Semibold;
    position: relative;
    bottom: 2px;
  }
}
.list-box{
  // display: flex;
  // justify-content: flex-start;
  // margin-left: 6%;
  
  ul{
    margin-top:0px;
    margin-bottom: 25px;
    overflow: hidden;
    width:376px;
    padding-left: 46px;
  }
  // margin-top: 10px;
  li{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    float: left;
    width: 165px;
  }
}
.titleicon {
  font-family: Microsoft YaHei;
  font-size: 20px;
  color: #13007d;
  margin: 0 10px;
  font-weight: 600;
  background: url('../assets/image/pojecttitle-bgm.png') no-repeat;
  // background-size: 208px 13px;
  width: 200px;
  text-align: center;
  background-position:center
}
.lefticon {
  background-image: linear-gradient(90deg, #ffffff 0%, #0a406e 100%);
  width: 40px;
  height: 1px;
}
.righticon {
  background-image: linear-gradient(270deg, #ffffff 0%, #0a406e 100%);
  width: 40px;
  height: 1px;
}
.boxicon {
  transform: rotate(-45deg);
  background: #13007d;
  width: 5px;
  height: 5px;
}

.imgIcon {
  width: 26px;
  height: 26px;
  margin: 7px;
}
.imgName {
  flex: auto;
  font-family: Microsoft YaHei;
  font-size: 16px;
  color: #ffffff;
  margin-left: 40px;
}
.orther-main{
  display: flex;
  justify-content: flex-start;
  margin-top:20px;
  .orther-main-left{
    width: 470px;
  }
  .orther-main-right{
    width: 470px;
    margin-left: 20px;
  }
  h3{
     margin-bottom: 10px;
     color: #11017D;
  }
  p{
    margin-top: 5px;
    margin-bottom: 20px;
  }
}

</style>
